<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-edit"></i> 个人中心</el-breadcrumb-item>
                <el-breadcrumb-item>修改用户</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="userContent">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item prop="username" label="用户名称">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="updateUserData('form')">确定</el-button>
                    <el-button @click="onCancle()">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    import Util from '../../utils/utils';
    export default {
        data() {
            // var validateEmail = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入邮箱'));
            //     } else if (!Util.emailReg.test(this.form.email)) {
            //         callback(new Error('请输入正确的邮箱'));
            //     } else {
            //         callback();
            //     }
            // };
            // var validatePhone = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入手机号'));
            //     } else if (!Util.phoneReg.test(this.form.phone)) {
            //         callback(new Error('请输入正确的手机号'));
            //     } else {
            //         callback();
            //     }
            // };
            // var validateCard = (rule, value, callback) => {
            //     if (value === '') {
            //         callback(new Error('请输入身份证号'));
            //     } else if (!Util.idCardReg.test(this.form.card)) {
            //         callback(new Error('请输入正确的身份证号'));
            //     } else {
            //         callback();
            //     }
            // };
            return {
                form: {
                    username: ''
                },
                rules: {
                    username: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            getUserData() {
                const self = this;
                let username = JSON.parse(sessionStorage.getItem('ms_user')).username;
                self.$http.get('/api/user/get_user?username=' + username, {}).then(function (response) {
                    console.log(response);
                    let result = response.data.user[0];
                    self.form.username = result.username;
                    self.form.account = result.account;
                    self.form.email = result.email;
                    self.form.phone = result.phone;
                    self.form.card = result.card;
                    self.form.birth = new Date(result.birth);
                    self.form.sex = result.sex === 1 ? '男' : '女';

                }).then(function (error) {
                    console.log(error);
                })
            },
            timestampToTime(timestamp) {
                var date = new Date(timestamp);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                return Y + M + D;
            },
            updateUserData(formName) {
                const self = this;
				self.form.birth = this.timestampToTime(self.form.birth)
                let formData = {
                    username: JSON.parse(sessionStorage.getItem('ms_user')).name,
                    email: self.form.email,
                    phone: self.form.phone,
                    card: self.form.card,
                    birth: self.form.birth,
                    sex: self.form.sex
                };
                self.$refs[formName].validate((valid) => {					
                    if (valid) {
                        self.$http.post('/api/user/update_user', formData).then(function (response) {
                            console.log(response);
                            self.$router.push('/success');
                        }).then(function (error) {
                            console.log(error);
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            onCancle() {
                this.$router.push('/userCenter');
            }
        },
        //初始化
        mounted() {
            this.getUserData();
        }
    }

</script>

<style>
    .userContent {
        width: 400px;
        margin: 0 auto;
    }

    .select-sex {
        width: 320px;
    }

</style>
